<!--  -->
<template>
    <div class="page page-index">
        <router-view></router-view>
        <tabbar class="wrap-tabbar">
            <tabbar-item 
                    v-for="item in tabbarData" 
                    :key="item.link"
                    :link="item.link"
                    :selected="$route.name==item.link"
                    >
                <o-icon slot="icon" :name="item.icon"></o-icon>
                <span slot="label">{{item.label}}</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
export default {
    data () {
        return {
            tabbarData: [
                {
                    icon: "android-home",
                    label: "首页",
                    link: "home"
                },
                {
                    icon: "android-compass",
                    label: "发现",
                    link: "discover"
                },
                {
                    icon: "person",
                    label: "我的",
                    link: "personal"
                }
            ]
        };
    },

    computed: {},

    methods: {}
}

</script>

<style lang='less' scoped>
.page-index .wrap-tabbar{
    background: #FFFFFF;
    position: fixed;
}
</style>